<template>
    <view class="content teacherContent-main">
        <view class="teacher-img">
            <image :src="content.photo" alt="" class="img"></image>
        </view>
        <h3 class="title">{{content.name}}</h3>
        <span class="type">{{content.sexLabel}}</span>
        <p class="content">{{content.instruction}}</p>
        <!-- <view class="content-all">
            <view class="content-top">
                <h3 class="title1">推荐课程</h3>
            </view>
            <view class="main-course">
                <view class="content-item1" v-for="(item,index) in courseList1" @tap="getContent(item)">
                    <img :src="item.photo" alt="">
                    <span class="name">{{item.title}}</span>
                    <p class="content1">{{item.introduction}}</p>
                </view>
            </view>
        </view> -->
    </view>
</template>

<script>



    export default {
        onLoad(options) {
            // document.title = "教师详情";
            // this.id = options.id;
            this.getContent(options.id);
            // this.getList();
        },
        components: {
            
        },
        data(){
            return{
               list1:[
                   
               ],
               courseList1:[],
               list2:[
                   
               ],
               pageNo:1,
               content:{},
               id:'',
            }
        },
        methods:{
            select(index){
                var len = this.list.length;
                for(var i=0;i<len;i++){
                    if(i==index){
                        this.list[i].addClass="select"
                    }
                    else{
                        this.list[i].addClass=""
                    }
                }
            },
            goContent(item){
                uni.navigateTo({
                    url: '../course/movieContent?id='+item.id,
                });
            },
            getContent(id){
              var that  = this;
              this.$http.post("/f/teacherById?id="+id)
              .then(function (response) {
                that.content = response.data;
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
            },
            getData(){
              var that  = this;
              this.$http.get("http://seed.ckwashington.com/admin/mini/queryTeacherDetails?teacherId="+this.id)
              .then(function (response) {
                var data = response.data;
                data.photo = "http://seed.ckwashington.com"+data.photo;
                that.content = data;
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
            },
        }
    }
</script>

<style lang="less">
    .teacherContent-main{
        background:#f4f4f4;
        display:block;
        height:100%;
        .content-all{
            width:670upx;
            margin:0 auto;
            margin-bottom:30upx;
            margin-top:30upx;
            display:none;
            .school{
                width:100%;
                display:block;
                margin-top:30upx;
                border-radius:20upx;
            }
            .main-course{
                width:calc(100% - 30upx);
                padding:0 15upx;
                display:flex;
                flex-wrap:wrap;
                justify-content:space-between;
                .content-item1{
                    width:290upx;
                    margin-top:30upx;
                    .name{
                        display:block;
                        width:100%;
                        line-height:50upx;
                        height:50upx;
                        color:#444444;
                        text-align:center;
                        font-size:26upx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    img{
                        width:100%;
                        height:250upx;
                        display:block;
                    }
                    .content1{
                        line-height:30upx;
                        height:60upx;
                        float:left;
                        margin-top:5upx;
                        width:100%;
                        color:#444444;
                        font-size:26upx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
            }
            .content-item{
                width:calc(100% - 30upx);
                padding:0 15upx;
                height:210upx;
                margin-top:30upx;
                .see{
                    float:left;
                    display:block;
                    width:calc(100% - 275upx);
                    line-height:30upx;
                    height:30upx;
                    margin-top:10upx;
                    color:#777777;
                    font-size:24upx;
                }
                .name{
                    float:left;
                    display:block;
                    width:calc(100% - 275upx);
                    line-height:45upx;
                    height:45upx;
                    color:#444444;
                    font-size:26upx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top:5upx;
                }
                img{
                    width:240upx;
                    height:210upx;
                    display:block;
                    margin-right:35upx;
                    float:left;
                }
                .content{
                    line-height:30upx;
                    height:60upx;
                    float:left;
                    margin-top:10upx;
                    width:calc(100% - 275upx);
                    color:#444444;
                    font-size:26upx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
            .content-top{
                width:100%;
                height:40upx;
                .title1{
                    float:left;
                    line-height:40upx;
                    padding-left:20upx;
                    border-left:8upx solid #0962a8;
                    font-size:30upx;
                    color:#444444;
                    font-weight:500;
                }
                .more{
                    line-height:40upx;
                    float:right;
                    font-size:28upx;
                    color:#444444;
                }
            }
        }
        .type{
            width:100%;
            display:block;
            line-height:30upx;
            margin-top:20upx;
            text-align:center;
            font-size:30upx;
            color:#444444;
        }
        .title{
            margin-top:30upx;
            width:100%;
            text-align:center;
            line-height:40upx;
            font-size:36upx;
        }
        .content{
            background:rgba(0,0,0,0);
            padding:40upx;
            font-size:32upx;
            color:#444444;
            line-height:50upx;
        }

        .teacher-img{
            width:100%;
            height:370upx;
            background:url('/static/img/base1.png') no-repeat center center;
            background-size:100% 100%;
            position:relative;
            margin-bottom:160upx;
            .img{
                width:240upx;
                height:240upx;
                left:50%;
                transform:translateX(-50%);
                position:absolute;
                bottom:-120upx;
                display:block;
                border-radius:50%;
            }
        }
        .liet-left{
            width:calc(50% - 10upx);
            display:flex;
            flex-wrap:wrap;
            float:left;
        }
        .liet-right{
            width:calc(50% - 10upx);
            display:flex;
            flex-wrap:wrap;
            float:right;
        }
        .list-item{
            width:100%;
            border-radius:30upx;
            background:#ffffff;
            overflow:hidden;
            margin-bottom:30upx;
            position:relative;
            .collect{
                position:absolute;
                right:25upx;
                bottom:25upx;
                height:35upx;
                .iconfont{
                    display:block;
                    width:35upx;
                    height:35upx;
                    border-radius:50%;
                    border:2px solid #f25b25;
                    color:#f25b25;
                    line-height:33upx;
                    font-size:24upx;
                    text-align:center;
                    float:left;
                    margin-right:10upx;
                    box-sizing:border-box;
                }
                .number{
                    line-height:35upx;
                    font-size:26upx;
                    float:left;
                    color:#777777;
                }
            }
            .type{
                line-height:30upx;
                display:block;
                width:100%;
                margin-top:10upx;
                padding-left:20upx;
                font-size:26upx;
            }
            .name{
                line-height:20upx;
                display:block;
                margin-top:10upx;
                width:100%;
                padding-left:20upx;
                font-size:30upx;
                margin-bottom:30upx;
            }
            img{
                width:100%;
                display:block;
            }
        }
    }
</style>
